<template>
  <div>
    <Category :disabled="!cutAttrList" />
    <el-card
      shadow="always"
      :body-style="{ padding: '20px' }"
      :style="{ marginTop: '20px' }"
      v-if="cutAttrList"
    >
      <template #header>
        <div>
          <el-button
            type="primary"
            size="default"
            icon="ele-Plus"
            @click="addAttr"
            :disabled="!category3Id"
            >添加属性</el-button
          >
        </div>
      </template>
      <el-table border stripe :data="attrInfoList">
        <el-table-column type="index" width="80" label="序号" />
        <el-table-column
          label="属性名称"
          width="180"
          prop="attrName"
        ></el-table-column>
        <el-table-column label="属性值名称列表">
          <template v-slot="{ row }">
            <div>
              <el-tag
                :type="`${index % 2 === 0 ? 'success' : ''}`"
                size="small"
                v-for="(item, index) in row.attrValueList"
                :style="{ marginLeft: '10px' }"
                >{{ item.valueName }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template v-slot="{ row }">
            <div>
              <el-button
                type="warning"
                size="small"
                icon="ele-Edit"
                @click="updataAttr(row)"
              ></el-button>
              <el-button
                type="danger"
                size="small"
                icon="ele-Delete"
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card
      v-else="cutAttrList"
      shadow="always"
      :body-style="{ padding: '20px' }"
      :style="{ marginTop: '20px' }"
    >
      <el-form label-width="80px" :inline="true">
        <el-form-item label="属性名">
          <el-input
            placeholder="请输入属性名"
            v-model="attrValueList.attrName"
          ></el-input>
        </el-form-item>
      </el-form>

      <div>
        <el-button type="primary" size="default" @click="addAttrValue"
          >添加属性值</el-button
        >
        <el-button size="default" @click="cutAttrList = true">取消</el-button>
      </div>

      <el-table
        border
        stripe
        :style="{ margin: '20px 0' }"
        :data="attrValueList.attrValueList"
      >
        <el-table-column type="index" width="80" label="序号" />
        <el-table-column label="属性值名称">
          <template v-slot="{ row, $index }">
            <div>
              <el-input
                v-if="row.isEdit"
                v-model="row.valueName"
                placeholder="请输入属性值"
                size="default"
                @blur="toLook(row, $index)"
                ref="editIpt"
              ></el-input>
              <div v-else @click="toEdit(row)">{{ row.valueName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ $index }">
            <div>
              <el-button
                type="danger"
                size="small"
                @click="deleteAttr($index)"
                icon="ele-Delete"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-button
          type="primary"
          size="default"
          @click="save"
          :disabled="
            attrValueList.attrName === '' ||
            attrValueList.attrValueList.length === 0
          "
          >确定</el-button
        >
        <el-button size="default" @click="cutAttrList = true">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Attr",
});
</script>

<script setup lang="ts">
import useCategoryStore from "@/stores/category";
import { storeToRefs } from "pinia";
import { nextTick, ref, watch } from "vue";
import {
  reqGetAttrInfoList,
  reqSaveAttrInfo,
  type attrInfoItemType,
  type attrInfoListType,
  type attrValueItemType,
} from "@/api/attr";
import { cloneDeep } from "lodash";

// category store
const categoryStore = useCategoryStore();
// 获取id数据
const { category1Id, category2Id, category3Id } = storeToRefs(categoryStore);

// 平台属性列表
const attrInfoList = ref<attrInfoListType>([]);

// 平台属性值数据收集
const attrValueList = ref<attrInfoItemType>({
  attrName: "",
  categoryId: category3Id.value as number,
  categoryLevel: 3,
  attrValueList: [],
});

// 切换属性列表和添加属性框
const cutAttrList = ref(true);

// 输入属性值的input DOM
const editIpt = ref();

// 获取平台属性数据
const getAttrListInfo = async () => {
  const re = await reqGetAttrInfoList(
    category1Id.value as number,
    category2Id.value as number,
    category3Id.value as number
  );
  attrInfoList.value = re;
};

// 点击添加属性打开更改对话框
const addAttr = () => {
  // 清空残留数据
  attrValueList.value = {
    attrName: "",
    categoryId: category3Id.value as number,
    categoryLevel: 3,
    attrValueList: [],
  };

  cutAttrList.value = false;
};

// 监听3id 变化发送请求
watch(category3Id, () => {
  if (!category3Id.value) {
    attrInfoList.value = [];
    return;
  }
  getAttrListInfo();

  // console.log(attrInfoList.value);
});

// 添加属性值
const addAttrValue = () => {
  // 设置category3Id
  attrValueList.value.categoryId = category3Id.value;

  // 在数据中添加属性
  attrValueList.value.attrValueList.push({
    valueName: "",
    isEdit: true,
  });
  //让输入框自动获取焦点   因为添加属性的时候才会创建input 框 ，所以需要在dom渲染完毕后才获取焦点  使用nexttike方法实现
  nextTick(() => {
    editIpt.value.focus();
  });
};

// input 失去焦点 切换为查看模式
const toLook = (row: attrValueItemType, index: number) => {
  // console.log(index);

  // 切换为查看模式
  row.isEdit = false;
  // 判断是否为空数据,如果为空即删除
  if (!row.valueName) attrValueList.value.attrValueList.splice(index, 1);

  // 判断是否有重复的数据,有重复的也需要删除
  const isReuse = attrValueList.value.attrValueList.some((item) => {
    // 排除自身
    if (item === row) return;
    return row.valueName === item.valueName;
  });
  // console.log(isReuse);

  if (isReuse) attrValueList.value.attrValueList.splice(index, 1);
};

// 点击属性名 进入 编辑模式
const toEdit = (row: attrValueItemType) => {
  // 切换为编辑模式
  row.isEdit = true;
  // 让输入框自动获取焦点  因为使用的是v-if 如果条件为假则不会在结构中,切换为编辑模式时新增input框,所以也需要使用nextTike方法
  nextTick(() => {
    editIpt.value.focus();
  });
};

// 点击删除按钮删除属性值
const deleteAttr = (index: number) => {
  attrValueList.value.attrValueList.splice(index, 1);
};

// 点击修改按钮 修改属性值
const updataAttr = (row: attrInfoItemType) => {
  // 设置category3Id
  attrValueList.value.categoryId = category3Id.value;

  // 打开修改属性值对话框
  cutAttrList.value = false;
  // 将数据回填到修改框中   需要改变的数据是引用数据类型 需要使用深拷贝
  attrValueList.value = cloneDeep(row);
};

// 点击确定按钮 提交数据请求新增或者修改
const save = async () => {
  // 整理数据

  // 发送请求
  await reqSaveAttrInfo(attrValueList.value);

  // 关闭更新数据框
  cutAttrList.value = true;
  // 重新获取数据
  getAttrListInfo();
};
</script>

<style scoped lang="scss"></style>
